<template>
	<div v-if="!showProduct">
		<p class="header">
			<el-icon><Handbag /></el-icon>
			<span class="title">项目立项</span>
		</p>
		<el-form
			:inline="true"
			ref="ruleFormRef"
			style=""
			:model="ruleForm"
			:rules="rules"
			label-width="auto"
			class="form-create"
			status-icon
			require-asterisk-position="left"
			size="small"
		>
			<el-form-item label="项目名称" prop="name">
				<el-input v-model="ruleForm.name" />
			</el-form-item>
			<el-form-item label="合同" prop="name">
				<el-select v-model="ruleForm.contract" style="width: 100%">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item>
			<el-form-item label="合同交期" prop="date">
				<el-date-picker v-model="ruleForm.date" type="date" placeholder="" style="width: 100%" />
			</el-form-item>
			<el-form-item label="客户名称" prop="customerName">
				<el-input v-model="ruleForm.customerName" />
			</el-form-item>
			<el-form-item label="模板" prop="template">
				<el-select v-model="ruleForm.template" style="width: 100%">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item>
			<el-form-item label="标签" prop="tag">
				<el-select v-model="ruleForm.tag" style="width: 100%">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item>
			<el-form-item label="负责人" prop="head">
				<el-select v-model="ruleForm.head" style="width: 100%">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item>
			<el-form-item label="技术要求" prop="name">
				<el-input v-model="ruleForm.name" />
			</el-form-item>
			<el-form-item label="产品配置" prop="name">
				<el-select v-model="ruleForm.products" multiple style="width: 100%">
					<el-option value="1"></el-option>
				</el-select>
				<!-- <el-button type="primary" :icon="Plus" @click="handleOpenCreateProduct">新增</el-button> -->
			</el-form-item>
			<div style="display: block; clear: both; width: 100%; margin-bottom: 10px">
				<span style="font-size: 13px; font-weight: bold; margin-right: 10px">产品配置表</span>
				<el-button type="primary" :icon="Plus" @click="handleOpenCreateProduct">新增</el-button>
				<el-button type="success" :icon="Edit" @click="handleOpenEditProduct">修改</el-button>
				<el-button type="danger" :icon="Delete" :disabled="!selectedProducts.length">
					删除
				</el-button>
			</div>
			<productConfigTable
				:productConfigDataList="productConfigDataList"
				:productComponentList="productOwnComponentList"
				@handleProductsSelectionChange="handleProductsSelectionChange"
			/>

			<el-form-item class="form-item-config" label="项目配置" prop="conf">
				<el-checkbox v-model="ruleForm.dependPlan" value="Online activities">
					依据项目计划与任务日期管理项目进度与资源
				</el-checkbox>
				<el-checkbox v-model="ruleForm.sumSubTask" value="Promotion activities">
					将任务/子任务的日期卷动汇总到项目和里程碑，而完成百分比、工作时间和时间日志将从子任务汇总到任务
				</el-checkbox>
			</el-form-item>
			<!-- <el-form-item prop=""></el-form-item> -->
			<div class="table-footer">
				<el-button size="large">取消</el-button>
				<el-button size="large" class="btn-next" type="primary" @click="handleNext">
					下一步
				</el-button>
			</div>
		</el-form>

		<productConfigModal :productDialogConfig="productDialogConfig" />
	</div>
	<div v-else>
		<createProduct @cancel="cancelProduct" />
	</div>
</template>
<style lang="scss" scoped>
.header {
	margin: 10px auto;
	font-weight: bold;
	margin-top: 20px;
	display: flex;
	align-items: center;

	.title {
		margin-left: 5px;
	}
}
.form-create {
	margin: 20px auto;
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 40%;
		// margin-left: 5%;
		&:nth-child(2n) {
			margin-left: 10%;
		}

		&.form-item-config {
			margin-left: 0;
			margin-top: 10px;
			width: 100%;

			.el-checkbox {
				width: 100%;
			}
		}
	}
}

.table-footer {
	display: block;
	// width: 100%;
	margin: 20px auto;

	.btn-next {
		margin-left: 50px;
	}
}
</style>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Check, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';
import productConfigModal from './productConfigModal.vue';
import productConfigTable from './productConfigTable.vue';
import type { ProjectFormData } from '../mockdata';
import { productConfigDataList, productComponentList, productOwnComponentList } from '../mockdata';
import createProduct from './createProduct.vue';

const showProduct = ref(false);

const $emit = defineEmits(['nextStep', 'toggleStepsVisible']);

const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive<ProjectFormData>({
	name: 'Hello',
	contract: '',
	date: '',
	customerName: '',
	conf: [],
	dependPlan: true,
	sumSubTask: false,
	template: '',
	tag: '',
	head: '',
	products: [],
});

const rules = reactive<FormRules<ProjectFormData>>({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
	],
	customerName: [{ required: true, message: '客户名称必填' }],
});

const handleNext = () => {
	$emit('nextStep', ruleForm);
};

/**
 * 选中的产品数量
 */
const selectedProducts = ref([]);

const handleProductsSelectionChange = _selections => {
	selectedProducts.value = _selections;
};

/**
 * 产品对话框设置
 */
const productDialogConfig = reactive({
	visible: false,
	title: '',
});

//打开新增产品对话框
const handleOpenCreateProduct = () => {
	// productDialogConfig.visible = true;
	// productDialogConfig.title = '新增产品';

	showProduct.value = true;
	$emit('toggleStepsVisible', false);
};

const cancelProduct = () => {
	showProduct.value = false;
	$emit('toggleStepsVisible', true);
};

//打开修改产品对话框
const handleOpenEditProduct = () => {
	if (selectedProducts.value.length != 1) {
		return ElMessage({
			message: '请选中一个产品进行修改',
			type: 'error',
		});
	}

	productDialogConfig.visible = true;
	productDialogConfig.title = '修改产品';
};
</script>
